/*modified 20171025*/
html,body{height:100%;}
.page4{
    padding:100px 22px 40px 22px;max-width:640px;box-sizing: border-box;margin:0 auto;
    background: #e5493d url("../img/page4_bg.png") no-repeat;min-height:100%;background-size: cover;}
/*modified 20171025 end*/
.page4_welcome{text-align: center;color:#fff;font-size: 20px;
position: absolute;left:5px;right:5px;top:30px;
}
.page4_welcome img{width: 100%;max-width:400px;}
.page4_welcome i{
    position: absolute;
    top: 35px;
    left: 50%;
    margin-left: -155px;
    display: inline-block;
    width: 310px;
    text-align: center;
}

.page4_info{background-color: #fff3e4;border-radius: 5px;padding:16px 33px;text-align: center;padding-top:60px;}
.page4_info_win{font-size: 24px;color: #785a32;margin-top: 10px;}
.page4_info_win i{font-size: 36px;color: #e5493d;font-weight: bold}
.page4_info_answer{font-size: 24px;color: #785a32;}
.page4_info_answer_score{color:#e5493d;font-size: 30px;font-weight: bold}
.page4_info_btn_two{padding-top: 30px;}
.page4_info_btn_two img{width: 50%;box-sizing: border-box;}
.page4_info_btn_two_left{padding-right:15px;}
.page4_info_btn_two_right{padding-left:15px;}
.page4_info_btn_one{padding-top:10px;}
.page4_info_btn_one img{width: 100%;}

.page4_rank {display:inline-block;font-size: 14px;color: #b2978a;margin: 20px auto 10px auto;text-align:left;}
.page4_rank span{margin-right:10px;text-align:left;display: inline-block;}

.page4_rankTop{background-color: #fff3e4;border-radius: 5px;margin-top: 30px;padding-top: 20px;position: relative;}
.page4_rankTop_topBg{
    background:url(../img/page4_rankBg.png) center no-repeat;
    background-size: cover;
    width:250px;
    height:40px;
    position: absolute;
    left:50%;
    top:-14px;margin-left:-125px;
}
.page4_rankTop_categary{font-size: 16px;color: #b2978a;padding-top: 4%;}
.page4_rankTop_categary:after{border-bottom: 1px solid #d2c7bb}
.page4_rankTop_categary_province,
.page4_rankTop_categary_total{width: 50%;float: left;padding:5px 0 10px;box-sizing: border-box;padding-left:70px;}
.page4_rankTop_categary_total{text-align: right;padding-right:10px;}


.rankTop_categary-class{padding:5px 12px;display: inline-block;cursor: pointer;}
.rankTop_categary-class:first-child{position: relative}
.rankTop_categary-class:first-child:after {position: absolute;content: "";top:7px;right:-2px;height:15px;width:1px; background: #b2978a;}
.page4_rankTop_categary .active{color: #e5493d;}
.page4_rankTop_list{display: none; margin-top: 10px;}
.page4_rankTop_list.active{display: block;}
.page4_rankTop_item{height:67px;display: table;width: 100%;}
.page4_rankTop_item:after{border-bottom:1px solid #f1e1d2}
.page4_rankTop_item:last-child:after{border-bottom: 0;}
.page4_rankTop_rank{display: table-cell;width: 70px;text-align: center;vertical-align: middle}
.page4_rankTop_rank_bg{
    width: 33px;height:33px;line-height:33px;margin:0 auto;
    border-radius:50%;background-color: #f36a66;font-size: 14px;color:#fff;font-weight: bold}
.page4_rankTop_item_first .page4_rankTop_rank{position: relative}
.page4_rankTop_item_first .page4_rankTop_rank img{width: 33px;}
.page4_rankTop_item_first .page4_rankTop_rank i{
    font-size: 14px;color:#fff;font-weight: bold;
    position: absolute;
    top: 16px;
    left: 31px;}
.page4_rankTop_item_first .page4_rankTop_score{color: #e5493d;}
.page4_rankTop_province{display: table-cell;vertical-align: middle;font-size: 16px;color: #511504;text-align: left}
.page4_rankTop_score{display: table-cell;vertical-align: middle;color: #b99f92;/*width:160px;*/font-size: 16px;text-align:right;padding-right:10px;}

@media screen and (max-width: 375px) {
    .page4_welcome i{top:30px;}
    .page4_info{padding-top:45px;}
    .page4_info_win{font-size: 22px;}
    .page4_info_win i{font-size: 22px;}
    .page4_info_answer{font-size: 18px;}
    .page4_rank_name {
        font-size: 12px;
    }
    .page4_rankTop_topBg{
        width:250px;
        margin-left:-125px;
        background-size: 100% auto;
        top:-14px;
    }
}
@media screen and (max-width: 360px) {
    .page4_welcome i {
        top: 27px;
    }
    .page4_rankTop_topBg{
        width:250px;
        margin-left:-125px;
        background-size: 100% auto;
        top:-14px;
    }
}
/*modified 20171025*/
@media screen and (max-width: 320px) {
    .page4{padding-top:100px;}
    .page4_welcome{top:34px;}
    .page4_welcome i{top:24px;font-size: 20px;}
    .page4_info_answer_score {font-size: 24px;}
    .page4_info{padding:30px 20px 16px 20px;}
    .page4_info_win{font-size: 22px;}
    .page4_info_win i{font-size: 22px;}
    .page4_info_answer{font-size: 18px;}
    .page4_rank {
        padding: 16px 10px;
    }
    .page4_rank_name {
        font-size: 12px;
    }
    .page4_rankTop_topBg{
        width:250px;
        margin-left:-125px;
        background-size: 100% auto;
        top:-14px;
    }
}
/*modified 20171025 end*/

.page4_share_overlay{
    position: fixed;top:0;right:0;left:0;bottom:0;display: none;
    background-color: rgba(0,0,0,0.8);
}
.page4_share_overlay_img{width: 158px;position: absolute;right:20px;top:30px;}
.page4_share_overlay_text{
    text-align: center;color: #fff;font-size: 18px;padding-top: 245px;
}
